<form id="inputForm" action="#(base)/admin/content/save" method="post">
	<div class="box-body">
		<!--tab页-->
		<div class="nav-tabs-custom">
			<!--tab头-->
			<ul class="nav nav-tabs">
				<li class="active"><a href="#tab-basic" data-toggle="tab">基本选项</a></li>
				<li><a href="#tab-high" data-toggle="tab">高级选项</a></li>
			</ul>
			<!--tab头/-->
			<!--tab内容-->
			<div class="tab-content">
				<div class="tab-pane active" id="tab-basic">
					<div class="row data-type">
						<div class="col-md-2 title">栏目</div>
						<div class="col-md-10 data">
							<select class="form-control" name="categoryId">
		                       <option value="">请选择</option>
								#for(categoryItem : categoryTree)
								<option value="#(categoryItem.id)" #if(category.id==categoryItem.id) selected #end>
									#if(categoryItem.grade != 0)
									     #for(i = 0; i < categoryItem.grade; i++)
											&nbsp;&nbsp;
										#end
									#end
									#(categoryItem.name)
								</option>
								#end
		                    </select>
						</div>
						<div class="col-md-2 title">标题</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="标题" name="title" value="">
						</div>
						#for(modelField : modelFields) 
						#if(modelField.type=="input")
						<div class="col-md-2 title">#(modelField.alias)</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="#(modelField.alias)" name="#(modelField.name)" value="">
						</div>
						#else if(modelField.type=="textarea")
						<div class="col-md-2 title rowHeight2x">#(modelField.alias)</div>
						<div class="col-md-10 data rowHeight2x">
							<textarea class="form-control" rows="3" placeholder="#(modelField.alias)" name="#(modelField.name)"></textarea>
						</div>
						#else if(modelField.type=="editor")
						<div class="col-md-2 title editer">#(modelField.alias)</div>
						<div class="col-md-10 data editer">
							<textarea id="#(modelField.name)" name="#(modelField.name)" style="width: 100%; height: 300px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
						</div>
						#else if(modelField.type=="radio")
						<div class="col-md-2 title">#(modelField.alias)</div>
						<div class="col-md-10 data">
							<div class="form-group form-inline">
								#if(modelField.value??)
								#for(item : modelField.value.split(","))
								<div class="radio"><label><input type="radio" name="#(modelField.name)" value="#(item)"> #(item)</label></div>
								#end
								#end
							</div>
						</div>
						#else if(modelField.type=="checkbox")
						<div class="col-md-2 title">#(modelField.alias)</div>
						<div class="col-md-10 data">
							<div class="form-group form-inline">
								#if(modelField.value??)
								#for(item : modelField.value.split(","))
								<div class="checkbox"><label><input type="checkbox" name="#(modelField.name)" value="#(item)">#(item)</label></div>
								#end
								#end
							</div>
						</div>
						#else if(modelField.type=="select")
						<div class="col-md-2 title">#(modelField.alias)</div>
						<div class="col-md-10 data">
							<select class="form-control" name="#(modelField.name)">
								<option value="">--请选择--</option> 
								#if(modelField.value??)
								#for(item : modelField.value.split(","))
								<option value="#(item)">#(item)</option>
								#end
								#end
							</select>
						</div>
						#else if(modelField.type=="date")
						<div class="col-md-2 title">#(modelField.alias)</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control datetimepicker" placeholder="#(modelField.alias)" name="#(modelField.name)" value="">
						</div>
						#else if(modelField.type=="file")
						<div class="col-md-2 title">#(modelField.alias)</div>
						<div class="col-md-10 data" style="height: auto;" type="file">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="col-md-3 padding-clear">
									<input type="text" class="form-control" placeholder="#(modelField.alias)" name="#(modelField.name)">
								</div>
								<div class="col-md-2" style="padding-right: 0px;">
									<div style="float: right;" class="filePicker">选择文件</div>
								</div>
							</div>
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="pic picbox"></div>
							</div>
						</div>
						#else if(modelField.type=="multipleFile")
						<div class="col-md-2 title">#(modelField.alias)</div>
						<div class="col-md-10 data" style="height: auto;" type="multiFile">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="col-md-3 padding-clear">
									<input type="text" class="form-control" placeholder="#(modelField.alias)" name="#(modelField.name)">
								</div>
								<div class="col-md-2" style="padding-right: 0px;">
									<div style="float: right;" class="filePicker">选择文件</div>
								</div>
							</div>
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="pic picbox"></div>
							</div>
						</div>
						#end 
						#end
						<div class="col-md-2 title editer">简介</div>
						<div class="col-md-10 data editer">
							<textarea id="introduction" name="introduction"
								style="width: 100%; height: 300px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
						</div>
						<div class="col-md-2 title" style="height: 170px;">标签</div>
						<div class="col-md-10 data" style="height: 170px;">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="col-md-3 padding-clear">
									<input type="text" class="form-control" placeholder="标签" id="tag">
								</div>
								<div class="col-md-2" style="padding-right: 0px;">
									<button type="button" class="btn btn-default" id="addTag">添加</button>
								</div>
								<div class="col-md-2" style="padding-right: 0px;">
									<button type="button" class="btn btn-default" id="chooseTag">标签库</button>
								</div>
							</div>
							<div class="row" style="margin-top: 5px;margin-left: 0px; margin-right: 0px;" id="tagBody"></div>
						</div>
						<div class="col-md-2 title">作者</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="作者" name="author" value="">
						</div>
						<div class="col-md-2 title">来源</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="来源" name="source" value="">
						</div>
						<div class="col-md-2 title" style="height: 170px;">缩略图</div>
						<div class="col-md-10 data" style="height: 170px;" type="file">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="col-md-3 padding-clear">
									<input type="text" class="form-control" placeholder="缩略图" name="ico">
								</div>
								<div class="col-md-2" style="padding-right: 0px;">
									<div style="float: right;" class="filePicker">选择图片</div>
								</div>
							</div>
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="pic picbox"></div>
							</div>
						</div>
						<div class="col-md-2 title" style="height: 170px;">背景图</div>
	                    <div class="col-md-10 data" style="height: 170px;" type="file">
	                       	<div class="row" style="margin-left: 0px;margin-right: 0px;">
	                        	<div class="col-md-3 padding-clear">
		                            <input type="text" class="form-control" placeholder="背景图" name="image">
	                        	</div>
	                        	<div class="col-md-2" style="padding-right: 0px;">
	                        		<div style="float: right;" class="filePicker">选择图片</div>
	                        	</div>
	                       	</div>
	                       	<div class="row" style="margin-left: 0px;margin-right: 0px;">
                        		<div class="pic picbox">
                   				</div>
                        	</div>
	                    </div>
						<div class="col-md-2 title" style="height: 170px;">轮播多图</div>
						<div class="col-md-10 data" style="height: 170px;"
							type="multiFile">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="col-md-3 padding-clear">
									<input type="text" class="form-control" placeholder="轮播多图" name="pics">
								</div>
								<div class="col-md-2" style="padding-right: 0px;">
									<div style="float: right;" class="filePicker">选择图片</div>
								</div>
							</div>
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="pic picbox"></div>
							</div>
						</div>
						<div class="col-md-2 title" style="height: 170px;">块数据</div>
						<div class="col-md-10 data" style="height: 170px;">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<button type="button" class="btn btn-default" id="addChunk">添加</button>
							</div>
							<div class="row" style="margin-left: 0px; margin-right: 0px;" id="chunkBody"></div>
						</div>
						<div class="col-md-2 title">配置</div>
						<div class="col-md-10 data line-height36">
							<div class="form-group form-inline">
								<div class="checkbox"><label><input type="checkbox" name="isTop" value="true">置顶</label></div>
								<div class="checkbox"><label><input type="checkbox" name="isRecommend" value="true"> 推荐</label></div>
								<div class="checkbox"><label><input type="checkbox" name="isHeadline" value="true"> 头条</label></div>
							</div>
						</div>
					</div>
				</div>
				<div class="tab-pane" id="tab-high">
					<div class="row data-type">
						<div class="col-md-2 title">标题颜色</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control colorpicker" placeholder="标题颜色" name="titlecolor">
						</div>
						<div class="col-md-2 title">副标题</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="副标题" name="subtitle" value="">
						</div>
						<div class="col-md-2 title rowHeight2x">备注</div>
                        <div class="col-md-10 data rowHeight2x">
                            <textarea class="form-control" rows="3" placeholder="备注" name="remark"></textarea>
                        </div>
						<div class="col-md-2 title">跳转链接</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="跳转链接" name="outlink" value="">
						</div>
						<div class="col-md-2 title">发布时间</div>
						<div class="col-md-10 data">
							<div class="input-group date">
								<div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								</div>
								<input type="text" class="form-control pull-right datetimepicker" id="publishDate" name="publishDate">
								<script type="text/javascript">
                                function today(){
                                    var today=new Date();
                                    var h=today.getFullYear();
                                    var m=today.getMonth()+1;
                                    var d=today.getDate();
                                    var hh=today.getHours();
                                    var mm=today.getMinutes();
                                    var ss=today.getSeconds();
                                    m= m<10?"0"+m:m;     
                                    d= d<10?"0"+d:d;
                                    hh = hh < 10 ? "0" + hh:hh;
                                    mm = mm < 10 ? "0" +  mm:mm;
                                    ss = ss < 10 ? "0" + ss:ss;
                                    return h+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
                                }
                                $("#publishDate").val(today());
                               	</script>
							</div>
						</div>
						<div class="col-md-2 title">数据</div>
						<div class="col-md-10 data">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="col-md-1" style="padding-top: 8px;">访问数：</div>
								<div class="col-md-1">
									<input class="form-control" type="text" name="visits" value="0">
								</div>
								<div class="col-md-1" style="padding-top: 8px;">点赞数：</div>
								<div class="col-md-1">
									<input class="form-control" type="text" name="likes" value="0">
								</div>
								<div class="col-md-1" style="padding-top: 8px;">反对数：</div>
								<div class="col-md-1">
									<input class="form-control" type="text" name="oppose" value="0">
								</div>
							</div>
						</div>
						<div class="col-md-2 title" style="height: 170px;">附件</div>
						<div class="col-md-10 data" style="height: 170px;" type="file">
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="col-md-3 padding-clear">
									<input type="text" class="form-control" placeholder="附件" name="attach">
								</div>
								<div class="col-md-2" style="padding-right: 0px;">
									<div style="float: right;" class="filePicker">选择文件</div>
								</div>
							</div>
							<div class="row" style="margin-left: 0px; margin-right: 0px;">
								<div class="pic picbox"></div>
							</div>
						</div>
						<div class="col-md-2 title">关键词</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="关键词" name="keywords" value="">
						</div>
						<div class="col-md-2 title">描述</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="描述" name="description" value="">
						</div>
						<div class="col-md-2 title">状态</div>
                        <div class="col-md-10 data">
                            <div class="form-group form-inline">
                                <div class="radio"><label><input type="radio" name="status" value="1" checked="checked"> 显示</label></div>
                                <div class="radio"><label><input type="radio" name="status" value="0"> 隐藏</label></div>
                            </div>
                        </div>
					</div>
				</div>
				<!--工具栏-->
				<div class="box-tools text-center">
					<button type="submit" class="btn bg-maroon">保存</button>
					<button type="button" class="btn bg-default" id="backButton">返回</button>
				</div>
				<!--工具栏/-->
			</div>
			<!--tab内容/-->
		</div>
		<!--tab页/-->
	</div>
</form>
<!-- modal -->
<div class="modal fade" id="chunkModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">信息</h4>
      </div>
      <div class="modal-body">
      	<input type="hidden" id="chunkIndex" value=""/>
        <textarea class="form-control" rows="3" id="chunkValue"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="chunkSubmit">保存</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="tagModel">
	<div class="modal-dialog">
		<div class="modal-content"></div>
	</div>
</div>
<!-- /.modal -->
<!---->
<script type="text/javascript">
$().ready(function() {

	var $inputForm = $("#inputForm");
	var $introduction = $("#introduction");
	try{
		UE.delEditor("introduction");
	}catch (e) {
	}
	$introduction.editor();
	$("#colorpicker").colorpicker();
	
	$.each($(".editor"),function(index,item){
		var itemId = $(item).attr("id");
		try{
			UE.delEditor(itemId);
		}catch (e) {
		}
		$("#"+itemId).editor();
	});
	
	$.each($(".filePicker"),function(index,item){
		$(item).uploader();
	});
	
    $.each($(".datetimepicker"),function(index,item){
    	$(item).datetimepicker({
    		format: 'yyyy-mm-dd hh:ii:ss',
    	    autoclose: true,
    	    language : 'zh-CN'
        });
    });
    
    $("#backButton").on("click",function(){
    	formBack();
    });
    
    //数据块chunkValue start
    var chunkIndex = 0;
    $("#addChunk").on("click",function() {
        $('#chunkModal').modal('show');
        $("#chunkIndex").val(chunkIndex);
    });
    $("#chunkSubmit").on("click",function() {
        var inputChunkValue = $("#chunkValue").val();
        var inputChunkIndex = $("#chunkIndex").val();
        if (isEmpty(inputChunkValue)) {
            alert("数据不能为空");
            return;
        }
        var html = '<input type="hidden" name="chunkValues" value="' + inputChunkValue + '">' + inputChunkValue + '&nbsp;&nbsp;&nbsp;'+
      			  '<a href="javascript:void(0)" class="edit" chunkIndex="' + inputChunkIndex + '">编辑</a>&nbsp;&nbsp;'+
      			  '<a href="javascript:void(0)" class="delete">删除</a>&nbsp;&nbsp;'+
      			  '<a href="javascript:void(0)" class="toBefore">向上</a>&nbsp;&nbsp;'+
      			  '<a href="javascript:void(0)" class="toAfter">向下</a>&nbsp;&nbsp;';
        var length = $("#chunkBody").find("#chunkIndex" + inputChunkIndex).length;
        if (length < 1) {
            $("#chunkBody").append('<div id="chunkIndex' + inputChunkIndex + '" class="chunk">' + html + '</div>');
        } else {
            $("#chunkBody").find("#chunkIndex" + inputChunkIndex).html(html);
        }
        $('#chunkModal').modal('hide');
        $("#chunkIndex").val("");
        $("#chunkValue").val("");
        chunkIndex++;
    });

    $("#chunkBody").on("click", ".delete",function() {
        $(this).parent().remove();
    });

    $("#chunkBody").on("click", ".edit",function() {
        $("#addChunk").trigger("click");
        var chunkValue = $(this).parent().find("input").val();
        var chunkIndex = $(this).attr("chunkIndex");
        $("#chunkValue").val(chunkValue);
        $("#chunkIndex").val(chunkIndex);
    });
    
     $("#chunkBody").on("click", ".toBefore",function() {
 	   var chunkDiv = $(this).parent();
 	   var preChunkDiv = chunkDiv.prev(".chunk");
 	   if(preChunkDiv.length<1){
 		   alert("已经到最前了");
 		   return;
 	   }
 	   $(chunkDiv.prop("outerHTML")).insertBefore(preChunkDiv);
 	   chunkDiv.remove();
    });
    
    $("#chunkBody").on("click", ".toAfter",function() {
 	   var chunkDiv = $(this).parent();
 	   var nextChunkDiv = chunkDiv.next(".chunk");
 	   if(nextChunkDiv.length<1){
 		   alert("已经到最后了");
 		   return;
 	   }
 	   $(chunkDiv.prop("outerHTML")).insertAfter(nextChunkDiv);
 	   chunkDiv.remove();
    }); 
    //数据块chunkValue end

	//标签tag start
	$("#chooseTag").on("click",function(){
		$('#tagModel').modal({ remote: "#(base)/admin/content/tag" });
	});

	$("#tagModel").on("hidden.bs.modal", function() {
		$(this).removeData("bs.modal");
	});
	$("#tagBody").on("click","a",function () {
		$(this).parent().remove();
	});
	$("#addTag").on("click",function(){
		var text = $("#tag").val();
		if(isEmpty(text)){
			alert("标签内容不能为空");
			return;
		}
		if($("#tagBody span[val='"+text+"']").length<1){
			$("#tagBody").append('<span class="labelS" val="'+text+'">'+text+'<input type="hidden" name="tagNames" value="'+text+'"/><a href="javascript:void(0);">×</a></span>');
			$("#tag").val('');
		}else{
			alert("不能添加重复的标签");
			return;
		}
	});
	//标签tag end
    
	// 表单验证
	$inputForm.validate({
		rules: {
			title: "required",
			categoryId: "required",
			visits: "digits",
			likes: "digits",
			oppose: "digits"
		},
		submitHandler: function(form) {
			$.ajax({
				url: $(form).attr("action"),
				type: $(form).attr("method"),
				data: $(form).serialize(),
				dataType: "json",
				cache: false,
				success: function(response) {
					if (response.type == "success") {
						swal({title:'', text:'操作成功',icon: 'success',button:false,timer: 2000}).then(function(){
							formBack();
						});
		            }else{
		                swal({title:'', text:response.msg,icon: 'error'});
		            }
				}
			});
			return false;
		}
	});

});
</script>
